<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<spring:message code="searchbox.detailtravellers_lbl" var="detailtravellers_lbl"/>
<spring:message code="searchbox.persons_lbl" var="persons_lbl" />
<spring:message code="searchbox.startdate_lbl" var="startdate_lbl"/>
<spring:message code="searchbox.destination_lbl" var="destination_lbl"/>
<spring:message code="searchbox.accommodationtypes_lbl" var="accommodationtypes_lbl"/>
<spring:message code="searchbox.choose_destination_cb" var="choose_destination_cb"/>
<spring:message code="searchbox.holidayperiod_lbl" var="holidayperiod_lbl"/>
<spring:message code="searchbox.chooseamountdays_cb" var="chooseamountdays_cb"/>
<spring:message code="searchbox.showresults_btn" var="showresults_btn"/>


<form id="searchForm" class="searchDiv" method="get" action="${pageContext.request.contextPath}/trip/search">
    <h4 class="searchDivSubject">${detailtravellers_lbl}</h4>
    <div class="form-group" >
        <label class="form-control-static searchDivLabel">${persons_lbl}</label>
        <input class="searchDivInput" type='number' name="persons" value="2" />
    </div>
    <h4 class="searchDivSubject">${startdate_lbl}</h4>
    <div class="form-group" >
        <label class="form-control-static searchDivLabel">Alle vertrekdata</label>
        <input class="searchDivInputDate" type='date' />
    </div>

<!--    <h4 class="searchDivSubject">${accommodationtypes_lbl}</h4>
    <div id="AccommodationTypes" class="form-group">
    </div>-->
    
    <h4 class="searchDivSubject">${destination_lbl}</h4>
    <div id="countrieGroup" class="form-group">
    </div>
    <input class="button center-block" type="submit" value="${showresults_btn}"/>
</form>

<script>
    $(document).ready(function () {
        var countries = [];
    <c:forEach var='countryname' items='${search}'>
            countryname = '${countryname}';
            countries.push(countryname);
    </c:forEach>
        $.ajax({
            url: window.location.origin + "/reisorg-cust-site/country/getall",
            type: "GET",
            dataType: 'json',
            success: function (data, textStatus, jqXHR)
            {
                $.each(data, function (key, value) {
                    $('<div>', {class:'row'}).appendTo('#countrieGroup'); 
                    if(countries.indexOf(value.name) != '-1')
                    {
                        $('<input />', { type: 'checkbox', checked: 'true', id: value.id, name:"country", value: value.name }).appendTo('#countrieGroup');
                    }
                    else {
                        $('<input />', { type: 'checkbox', id: value.id, name:"country", value: value.name }).appendTo('#countrieGroup');
                    }
                    
                    $('<label />', { 'for': value.id, text: value.name, class:'form-control-static searchCheckBoxText' }).appendTo('#countrieGroup');
                    $('</div>').appendTo('#countrieGroup'); 
                });
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert("Mislukt om een connectie met de server te maken");
            }
        });
        
    });
    

</script>